<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link th:href="@{/img/vc_icon.png}" rel="shortcut icon"/>
    <title>Recording</title>
</head>
<body>
<div class="">
    <h1>录音Demo</h1>
    <button onclick="startRecording()">开始录音</button>
    <input type="file" id="audioFile" style="display: none;">
    <button onclick="stopRecording()">停止录音</button>
    <br>
    <textarea id="result" rows="5" cols="50" readonly></textarea>
</div>
</body>
<script th:src="@{/js/jquery.min.js}"></script>
<script>

    // let mediaRecorder;
    // let chunks = [];
    //
    // function startRecording() {
    //     navigator.mediaDevices.getUserMedia({audio: true})
    //         .then(function (stream) {
    //             mediaRecorder = new MediaRecorder(stream);
    //
    //             mediaRecorder.start();
    //             mediaRecorder.addEventListener("dataavailable", function (e) {
    //                 console.log('data available' + e.data);
    //                 chunks.push(e.data);
    //             });
    //         })
    //         .catch(function (err) {
    //             console.error(err);
    //         });
    //
    //
    // }
    //
    // function stopRecording() {
    //     mediaRecorder.stop();
    //     mediaRecorder.addEventListener('stop', function () {
    //         let blob = new Blob(chunks, {type: 'audio/wav'});
    //
    //         let formData = new FormData();
    //         formData.append('audio', blob);
    //
    //         fetch('/uploadAudio', {method: 'POST', body: formData})
    //             .then(function (response) {
    //                 return response.text();
    //             })
    //             .then(function (text) {
    //                 document.getElementById('result').value = text;
    //             })
    //             .catch(function (error) {
    //                 console.error(error);
    //             });
    //
    //         chunks = [];
    //     })
    // }

    function startRecording() {
        $.ajax({
            url: '/startRecording',
            type: 'POST',
            success: function (data) {
                console.log(data)
            },
            error: function (xhr,status,error){
                console.error(error)
            }
        })
    }

    function stopRecording() {
        let fileInput = document.getElementById('audioFile');
        let file = fileInput.files[0];

        let formData = new FormData();
        formData.append('file',file)

        $.ajax({
            url: '/stopRecording',
            type: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            success: function (data) {
                console.log(data)
                document.getElementById('result').value = data
            },
            error: function (xhr,status,error){
                console.error(error)
            }
        })
    }

</script>
</html>